import React, { Component } from "react";
import "./index.css";
import images_1 from "@/assets/images/myswiper/1.jpg";
import images_2 from "@/assets/images/myswiper/2.jpg";
import images_3 from "@/assets/images/myswiper/3.jpg";
import images_4 from "@/assets/images/myswiper/4.jpg";
import images_5 from "@/assets/images/myswiper/5.jpg";

const imageList = [
  { src: images_1, desc: "第一张" },
  { src: images_2, desc: "第二张" },
  { src: images_3, desc: "第三张" },
  { src: images_4, desc: "第四张" },
  { src: images_5, desc: "第五张" },
];
export default class Banner1 extends Component {
  state = {
    imageList: imageList,
    first: imageList.length - 2,
    prev: imageList.length - 1,
    curr: 0,
    next: 1,
    last: 2,
    imageLength: imageList.length,
    showDesc: false, //默认不显示文案
    showButton: false,
  };
  timer = null;

  getClassName(index) {
    const { curr, prev } = this.state;
    if (index === curr) {
      return "curr";
    }
    if (index === prev) {
      return "prev";
    }
    return "next";
  }
  /**
   * 计算当前图片的位置
   */
  calcPosition(curr, isReduce) {
    if (isReduce) {
      return curr - 1 <= 0 ? this.state.imageLength : curr - 1;
    } else {
      return curr + 1 >= this.state.imageLength ? 0 : curr + 1;
    }
  }

  /***
   * 切换图片
   */
  changeImagePosition(isReduce) {
    const { curr, prev, next, first, last, imageList } = this.state;
    this.setState(
      Object.assign(
        {
          showDesc: false,
        },
        isReduce
          ? {
              first: this.calcPosition(first, true),
              prev: this.calcPosition(prev, true),
              curr: this.calcPosition(curr, true),
              next: this.calcPosition(next, true),
              last: this.calcPosition(last, true),
            }
          : {
              first: this.calcPosition(first),
              prev: this.calcPosition(prev),
              curr: this.calcPosition(curr),
              next: this.calcPosition(next),
              last: this.calcPosition(last),
            }
      ),
      () => {
        setTimeout(() => {
          this.setState({
            showDesc: true,
          });
        }, 500);
      }
    );
  }

  /**
   * 定时器
   * @param {*} isFirst
   */
  handlerImagePosition(isFirst) {
    this.timer = setInterval(() => {
      this.changeImagePosition();
    }, 3000);
    if (isFirst) {
      this.changeImagePosition();
    }
  }
  componentDidMount() {
    this.handlerImagePosition(true);
  }

  onMouseEnter = () => {
    clearInterval(this.timer);
  };
  onMouseLeave = () => {
    this.handlerImagePosition();
  };

  render() {
    const { curr, prev, next, first, last, imageList } = this.state;
    return (
      <div className="carousel">
        <div
          className="image_list"
          onMouseEnter={this.onMouseEnter}
          onMouseLeave={this.onMouseLeave}
          onClick={() => this.changeImagePosition()}
        >
          {imageList.map((item, index) => {
            return (
              <div
                key={index}
                // 通过currImage 与 index 比较当前应该展示的图片
                className={`image_wrap animat ${
                  index === curr
                    ? "curr"
                    : index === prev
                    ? "prev"
                    : index === next
                    ? "next"
                    : index === first
                    ? "first"
                    : "last"
                }`}
              >
                {/* 通过showDesc来判断是否显示文案 */}
                <div
                  className={`desc${
                    index === curr && this.state.showDesc ? " showDesc" : ""
                  }`}
                >
                  {item.desc}
                </div>
                <img src={item.src} alt="" />
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
